<template>
  <div v-if="route.params.id">用户详情</div>

  姓名：<input type="text" v-model="searchObj.username" /> 邮箱：<input
    type="text"
    v-model="searchObj.email"
  />

  <button @click="search">搜索</button>
  <table>
    <thead>
      <tr>
        <th v-for="item in tableConfig">{{ item.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in dataSource">
        <td v-for="tableConfigItem in tableConfig">
          {{ item[tableConfigItem.dataIndex] }}
          <!-- item:{{ item }} tableConfigItem:{{ tableConfigItem }} -->
        </td>
        <td><button @click="() => goDetail1(item)">查看详情1</button></td>
        <td><button @click="() => goDetail(item.id)">查看详情</button></td>
      </tr>
    </tbody>
  </table>
  <Button>这是一个按钮</Button>
</template>

<script setup>
// 获取数据 -> 观察数据 -> 得出表格配置 -> 通过v-for渲染表格 -> 定义对象，进行双向绑定 -> 搜索
import { ref } from "vue";
import { getUserList } from "../../service/user";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { Button } from "ant-design-vue";

const router = useRouter();
const route = useRoute();
const tableConfig = [
  { title: "id", dataIndex: "id" },
  { title: "姓名", dataIndex: "username" },
  { title: "邮箱", dataIndex: "email" },
];
const dataSource = ref([]);
const searchObj = ref({});
const search = async () => {
  const res = await getUserList(searchObj.value);
  dataSource.value = res.data.data.record;
};
search();
const goDetail = (id) => {
  router.push({ name: "userDetail2", query: { id } });
};
// const getData = async () => {
//   const res = await getUserList();
//   dataSource.value = res.data.data.record;
// };
// getData();
const goDetail1 = (query) => {
  router.push({ path: "/user1", query });
};
</script>

<style></style>
